<template>
	<!-- <view class="pages-box" :style="{paddingTop:marTop+'px', backgroundImage:'url('+adminUrl+'/static/images/top_bg.jpg)'}"> -->
	<view class="pages-box padding20">
		<view class="page-bg">
			<view class="top-pic">
				<image :src="adminUrl+'/static/images/beij.png'"></image>
			</view>
			<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30" @click="goto('/pages/user/user_info/index',false)">
				<view class="u-m-r-10 avatar">
					<u-avatar :src=" isLogin && userInfo.wx_img && userInfo.wx_img !== '' ? adminUrl+userInfo.wx_img : adminUrl+pic" size="120" mode="square"></u-avatar>
				</view>
				<view class="u-flex-1">
					<view class="u-font-16" style="font-weight: 600;">{{isLogin &&  userInfo.wx_name && userInfo.wx_name !== null ? userInfo.wx_name : ''}}</view>
					<!-- <view class="u-font-14 u-tips-color">{{userInfo.tel !== null ? userInfo.tel : ''}}</view> -->
				</view>
			</view>
						
			<view class="navBox pad30">
				<block v-for="(items,index) in navList" :key="index">
					<view class="item acea-row row-between-wrapper row-middle" @click="goto(items.path,items.isTab)">
						<view class="left">
							<text class="iconfont" :class="items.icon"></text>
							<text class="name">{{items.title}}</text>
						</view>
						<view class="right">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</block>
				<view class="item acea-row row-right row-middle">
					<view @click="loginOut" style="color: #cccccc;">
						退出登录
						<text class="iconfont icon-tuichudenglu" style="font-size: 28rpx; margin-left: 10rpx;"></text>
					</view>
				</view>
			</view>	
			<atModel v-if="isPhoneBox"
				:userPhoneType="true" 
				:isPhoneBox="isPhoneBox"  
				:authKey="authKey" 
				:content="getPhoneContent"
				:userId="uid"
				 @closeModel="bindPhoneClose" 
				 @confirmModel="confirmModel"></atModel>
		</view>
		<view class="uni-p-b-98"></view>
		<page-nav></page-nav>
	</view>
</template>

<script>
	import store from "@/store";
	import {mapGetters} from "vuex";
	import { toLogin } from '@/libs/login';
	import { Http_admin_url } from '@/config/config.js'
	import atModel from '@/components/model/index.vue'
	import {getInfo,getKfInfo} from '@/api/index.js'
	import {openPamperSubscribe} from '@/utils/SubscribeMessage.js'
	import pagenav from "@/components/page-nav/page-nav.vue"
	export default {
		computed: mapGetters(['isLogin', 'chatUrl', 'userInfo', 'uid']),
		components: {
			atModel,
			pagenav
		},
		data() {
			return {
				adminUrl:Http_admin_url,
				bg:'/upload/beij.png',
				marTop:0,
				pic:'',
				navList:[
					{
						title:'个人资料',
						icon:'icon-gerenziliao',
						path:'/pages/user/user_info/index',
						isTab:false
					},
					// {
					// 	title:'用户协议',
					// 	icon:'icon-yonghuxieyi',
					// 	path:'/pages/about/index?id=7',
					// 	isTab:true
					// },
					{
						title:'关于我们',
						icon:'icon-guanyuwomen',
						path:'/pages/about/index?id=1',
						isTab:false
					},
					{
						title:'联系客服',
						icon:'icon-contact',
						path:'tel',
						isTab:false
					},
				],
				show:true,
				authKey: '',
				isPhoneBox:false,
				getPhoneContent:'申请获取您的手机号用于完善信息，完成后可使用系统更多功能',
				isMsg:false,//是否订阅信息
				sysphone:'',
				kflink:'',
			}
		},
		created() {
		},
		onLoad() {
			if(!this.isLogin){
				toLogin()
			}else{
				if(this.userInfo.tel == '' || this.userInfo.tel == null){
					this.isPhoneBox = true
				}
			}
		},
		onShow() {
			let self = this
			// #ifdef APP-PLUS
			let barHeight = uni.getSystemInfoSync().statusBarHeight;
			self.marTop = barHeight + 40; //刘海屏
			setTimeout(() => {
				if (self.appUpdate.openUpgrade == 'true') {
					self.appVersionConfig();
				}
			}, 1000)
			// #endif
			// #ifdef MP
			uni.getSystemInfo({
			    success: (res) => {
			      // 获取手机顶部状态栏的高度
			      const statusBarHeight = res.statusBarHeight || 0;
			 
			      // 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
			      const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			      const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2;
			      // 计算顶部图标距离
			      const topIconDistance = statusBarHeight + navBarHeight;
				  self.marTop = topIconDistance
			 
			      // 打印顶部图标距离
			      // console.log('顶部图标距离:', topIconDistance);
			    },
			    fail: (err) => {
			      console.error('获取系统信息失败:', err);
			    },
			});
			// #endif
			this.getKfInfo()
		},
		methods: {
			// 获取客服链接
			getKfInfo(){
				getKfInfo(1).then(res=>{
					if(res.code == 900){
						this.kflink = res.data.link
					}
				})
			},
			// 联系客服
			goTokefu(){
				let that=this
				// console.log('kflink',that.kflink)
				// #ifdef MP-WEIXIN
				wx.openCustomerServiceChat({
					extInfo: {
						url: that.kflink,
					},
					corpId: that.$config.qywxId,
					success(res) {
						console.log('成功了',res)
						that.saverOrder()
					},
					fail: function(err) {
					    // 打开客服会话失败的回调
					    console.error('打开客服会话失败', err);
					}
				})
				// #endif
			},
			
			loginOut(){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认退出登录?',
					success: function(res) {
						if (res.confirm) {
							that.$store.dispatch('GETLOGOUT');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			goto(path,isTab){
			  if(isTab){
				  if(path == '/pages/main/pet/index' && !this.isMsg){
					  openPamperSubscribe().then((res)=>{
						  // console.log('success',res)
						 this.saveUserMeg(()=>{
							  uni.switchTab({
								  url:path
							  })
						 })
					  }).catch(err=>{
						  console.log('fail',err)
					  })
				  }else{
					  uni.switchTab({
						  url:path
					  })
				  }
			  }
			  if(path == 'tel'){
				  this.goTokefu()
			  }else{
				  uni.navigateTo({
					url:path
				  })
			  }
			},
			bindPhoneClose(data) {
				this.isPhoneBox = false
			},
			confirmModel(){
			},
			//拨打电话
			call(phone) {
				console.log('phone')
				const res = uni.getSystemInfoSync();
				// ios系统默认有个模态框
				if(res.platform=='ios'){
					uni.makePhoneCall({
					phoneNumber:phone,
					success(){
						console.log('拨打成功了');
					},
					fail() {
						console.log('拨打失败了');
					}
				})
				}else{
				//安卓手机手动设置一个showActionSheet
					uni.showActionSheet({
						itemList: [phone,'呼叫'],
						success:function(res){
							// console.log(res);
						   if(res.tapIndex==1){
							uni.makePhoneCall({
							  phoneNumber: phone,
							})
						  }
						}
					})
				}
			},
			
		}
	}
</script>

<style lang="scss">
page{	
	// background-color: #ededed;
	color: #333333;
}

.pages-box{
	
	.page-bg{
		background-color: #ffffff;
		border-radius: 40rpx;
		overflow: hidden;
		.avatar{
			margin-top: -60rpx;
		}
	}
	 .top-pic{
		 width: 100%;
		 // height: 350rpx;
		 border-radius: 20rpx;
		 image{
		 	width: 100%;
		 	// height: 100%;
		 }
	 }
 .menu-index-box{
 	.menu-item{
 		width: calc(50% - 20rpx);
 		background-color: #E3E3E3;
 		padding: 20rpx;
		border-radius: 24rpx;
		color: #ffffff;
		flex-wrap: nowrap;
 		.item-title{
 			// width: calc(100% - 88rpx);
			text-align: center;
 			.title{
 				font-size: 36rpx;
 				font-weight: 600;
 				padding-bottom: 10rpx;
				letter-spacing: 4rpx;
 			}
 			.notes{
 				font-size: 20rpx;
 			}
 		}
 		.item-icon{
			border-radius: 28rpx;
			padding: 10rpx;
			margin-right: 10rpx;
 			.iconfont{
				font-size: 53rpx;
			}
 		}
 	}
 }
 .navBox{
	 margin-top: 30rpx;
	.item{
		flex-wrap: nowrap;
		padding: 30rpx 0;
		border-bottom: #E3E3E3 2rpx solid;
		.iconfont{
			font-size: 38rpx;
			margin-right: 10rpx;
			font-weight: 600;
		}
		.name{
			font-size: 32rpx;
			font-weight: 500;
		}
	}
	.item:last-child{
		border-bottom: none;
	}
 }
}
.user-box{
}
</style>
